<template>
    <transition :name="transitionName" mode="out-in">
        <router-view />
    </transition>
    <MIITBeian beian-text="桂ICP备2025074430号-1" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import MIITBeian from "@/components/MIITBeian.vue";

const transitionName = ref("fade");

function handleWheel(e) {
    if (e.deltaY > 0) {
        transitionName.value = "slide-up";
    } else if (e.deltaY < 0) {
        transitionName.value = "slide-down";
    }
}

onMounted(() => {
    window.addEventListener("wheel", handleWheel);
});
onUnmounted(() => {
    window.removeEventListener("wheel", handleWheel);
});
</script>

<style scoped>
/* App <router-view />过度动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
    opacity: 1;
}
/* 向上弹出动画 */
.slide-up-enter-active,
.slide-up-leave-active {
    transition: transform 0.8s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-up-enter-from,
.slide-up-leave-to {
    transform: translateY(100px);
    opacity: 0;
}
.slide-up-enter-to,
.slide-up-leave-from {
    transform: translateY(0);
    opacity: 1;
}

/* 向下弹出动画 */
.slide-down-enter-active,
.slide-down-leave-active {
    transition: transform 0.8s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-down-enter-from,
.slide-down-leave-to {
    transform: translateY(-100px);
    opacity: 0;
}
.slide-down-enter-to,
.slide-down-leave-from {
    transform: translateY(0);
    opacity: 1;
}
</style>
